We were struggling with getting the pagemenu to work with bound page item ids.

For example we originally found we needed to use item id's with full paths for the href's in the pagemenu to jump to correct section. We were using route-segment module for routing.

This is what we were trying:

<div pageitems selector="pageitem">
        <h2 id="{{pageUrl}}#1" class="pageitem">Section 1</h2>
        <h2 id="{{pageUrl}}#2" class="pageitem">Section 2</h2>
</div>

where pageUrl = "/page1"

(and I suppose other routing).

Though it was clicking through, there pagemenu wasn't displaying correctly because of exception when the element id lookup would fail because the id used here has unresolved variables (ie. still had the {{...}} in it)

ie. this code in @ line 10 in pageitems.js:

// this function will be called once dom is parsed and menu is created
getState().onRun= function() {
    scope.spies[scope.spyElems[0].id].set(); // highlight first element
};

So this is a solution that enables passing the off the pageUrl prefix that gets value resolved before it is stored as part of the items id.

Example how to use it:

<div pageitems selector="pageitem"  pageurl="{{pageUrl}}">
        <h2 id="1" class="pageitem">Section 1</h2>
        <h2 id="2" class="pageitem">Section 2</h2>
</div>

The pageitems directive will update the id's of the elements with the pageUrl prefix.

Maybe there is a better solution, but this worked for us.